<template>
    <div class="min-h-screen flex">
        <!-- 左侧区域 - 1/5宽度 -->
        <div class="w-1/2 bg-primary relative overflow-hidden">
            <div class="absolute inset-0">
                <img src="https://picsum.photos/900/1440" alt="登录页装饰图" class="w-full h-full object-cover">
            </div>
            <!-- 遮罩层，增加一些深色调 -->
            <div class="absolute inset-0 bg-gradient-to-b from-primary/40 to-primary/60"></div>
        </div>

        <!-- 右侧登录表单 - 4/5宽度 -->
        <div class="flex-1 flex items-center justify-center bg-gray-50">
            <div class="max-w-[480px] w-full px-10 py-8 bg-white rounded-lg shadow-md">
                <div class="text-center mb-8">
                    <h2 class="text-2xl font-bold text-gray-900">账号登录</h2>
                    <p class="mt-2 text-sm text-gray-600">欢迎回来</p>
                </div>
                <form class="space-y-6" @submit.prevent="handleLogin">
                    <div class="space-y-4">
                        <div>
                            <label for="username" class="block text-sm font-medium text-gray-700">用户名</label>
                            <div class="mt-1">
                                <input id="username" v-model="form.username" type="text" required
                                    class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary focus:border-primary"
                                    placeholder="请输入用户名">
                            </div>
                        </div>
                        <div>
                            <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
                            <div class="mt-1">
                                <input id="password" v-model="form.password" type="password" required
                                    class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary focus:border-primary"
                                    placeholder="请输入密码">
                            </div>
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <input id="remember-me" v-model="form.rememberMe" type="checkbox"
                                    class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded cursor-pointer">
                                <label for="remember-me"
                                    class="ml-2 block text-sm text-gray-900 cursor-pointer">30天免登录</label>
                            </div>
                            <div class="text-sm">
                                <a href="#" class="font-medium text-primary hover:text-primary-dark">忘记密码？</a>
                            </div>
                        </div>
                    </div>

                    <div>
                        <button type="submit"
                            class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
                            :disabled="loading">
                            {{ loading ? '登录中...' : '登录' }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import cache from '@/utils/cache';
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useUserStore } from '@/utils/stores/modules/user'
import { PageEnum } from '@/utils/enums/pageEnum';
import { ACCOUNT_KEY } from '@/utils/enums/cacheEnums';
const storeUser = useUserStore();
const router = useRouter();
const route = useRoute();
const loading = ref(false);
const form = ref({
    username: '',
    password: '',
    rememberMe: false,
});

const handleLogin = async () => {
    
    cache.set(ACCOUNT_KEY, {
        username: form.value.username,
        rememberMe: form.value.rememberMe,
    })

    await storeUser.login({
        username: form.value.username,
        password: form.value.password,
    })

    const {
        query: { redirect }
    } = route
    const path = typeof redirect === 'string' ? redirect : PageEnum.HOME

    router.push(path)
};
</script>

<style scoped>
.bg-primary {
    background-color: #2563eb;
}

.text-primary {
    color: #2563eb;
}

.hover\:bg-primary-dark:hover {
    background-color: #1d4ed8;
}

.focus\:ring-primary:focus {
    --tw-ring-color: #2563eb;
}

.focus\:border-primary:focus {
    border-color: #2563eb;
}
</style>
